<template>
    <div class="displayItem">
        <div id="backLink" @click="backToProduct">&lt; Return to {{ productId }}</div>
        <div id="detailItem">
            <div class="itemPicture" :style="{'background-image': `url(http://192.168.31.68:80/${product === null ? 'default.png' : product.picture})`}"></div>
            <div class="title">{{ product == null ? '' : product.name }}</div>
            <div class="subTitle">{{ itemId }}</div>
            <div class="explain">
                <p>{{ product == null ? '' : product.description }}</p>
                <p>{{ item == null ? '' : item.attribute1 }}</p>
                <p>{{ item == null ? '' : item.attribute2 }}</p>
                <p>{{ item == null ? '' : item.attribute3 }}</p>
                <p>{{ item == null ? '' : item.attribute4 }}</p>
                <p>{{ item == null ? '' : item.attribute5 }}</p>
            </div>
            <div class="price">
                <template v-if="item !== null && item.quantity <= 0">
                    Back ordered.
                </template>
                <template v-else>
                    {{ item == null ? '' : item.quantity }} in stock.
                </template>
                <span>￥{{ item == null ? '' : item.listPrice }}</span>
            </div>
            <div class="addToCart" @click="addItemToCart(itemId)">Add to Cart</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
    data() {
        return {
            picture: '',
            item: null,
            product: null
        }
    },
    computed: {
        ...mapState({
            productId: state => state.product.productId,
            itemId: state => state.item.itemId,
            signIn: state => state.account.signIn,
            account: state=> state.account.account
        })
    },
    methods: {
        ...mapMutations({
            changeInnerComponent: 'floatWindow/changeInnerComponent',
            changeVisible: 'floatWindow/changeVisible'
        }),
        ...mapActions({
            getProductByProductId: 'product/getProductByProductId',
            getItemByItemId: 'item/getItemByItemId',
            addItem: 'cart/addItem'
        }),
        backToProduct() {
            this.changeInnerComponent('FlexProduct')
        },
        addItemToCart(itemId) {
            if(this.signIn === false || this.account === null) {
                this.changeVisible()
                this.$router.push('/login')
            }
            this.addItem({username: this.account.username, itemId}).then((res) => {
                this.changeVisible()
                this.$router.push('/viewCart')
            }, (error) => {})
        }
    },
    mounted() {
        this.getProductByProductId(this.productId).then((res) => {
            this.product = res
        }, (error) => {
            console.log(error)
        })
        this.getItemByItemId(this.itemId).then((res) => {
            console.log(res)
            this.item = res
        }, (error) => {
            console.log(error)
        })
    }
}
</script>

<style lang="scss" scoped>
#backLink
{
    margin: 30px 50px;
    min-width: 150px;
    width: 150px;
    height: 40px;
    border: 3px solid #833d1e;
    font-size: 1em;
    border-radius: 5px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

#backLink:hover
{
    color: #efe7db;
    background-color: #833d1e;
}

#detailItem .itemPicture
{
    margin: 5px auto;
    width: 750px;
    height: 500px;
    background-size: cover;
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.displayItem
{
    color: #833d1e;
    text-align: center;
}

.displayItem .title
{
    margin-top:  20px;
    font-size: 2.5em;
    font-weight: normal;
}

.displayItem .subTitle, .displayItem .explain, .displayItem .price
{
    margin-top: 20px;
    font-size: 1.5em;
}

.displayItem .addToCart
{
    margin: 25px auto 25px auto;
    width: 40%;
    height: 40px;
    border: 3px solid #833d1e;
    font-size: 1.1em;
    border-radius: 5px;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.displayItem .addToCart:hover
{
    color: #efe7db;
    background-color: #833d1e;
}
</style>